<template>
	<view class="advert-swiper">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:current="currentIndex" :duration="duration" :style="{ height: swiperHeight + 'px' }">
				<swiper-item v-for="(item,index) in list" :key="item._id">
					<view class="swiper-item uni-bg-red" :id="'content-wrap' + index">
						<image class="swiper-item-img" :src="item.imageUrl"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineProps,
		onMounted,
		getCurrentInstance,
		nextTick
	} from "vue";

	const instance = getCurrentInstance(); // 获取组件实例
	let autoplay = ref(true)
	let interval = ref(2000)
	let duration = ref(500)
	let indicatorDots = ref(false)
	let swiperHeight = ref(0)
	let currentIndex = ref(0)
	const props = defineProps({
		list: Array,
	});
	onMounted(() => {
		setTimeout(() => {
			setSwiperHeight()
		}, 1000)
	})
	//动态设置swiper的高度
	const setSwiperHeight = () => {
		console.log('11111111111111111111111111111111')
		let element = "#content-wrap" + currentIndex.value;
		let query = uni.createSelectorQuery().in(instance);
		query.select(element).boundingClientRect();
		query.exec((res) => {
			console.log(res, res[0])
			if (res && res[0]) {
				swiperHeight.value = res[0].height;
			}
		});
	}
</script>

<style lang="scss">
	.advert-swiper {
		background: #fff;
		border-radius: 10upx;
		height: auto;
	}

	.uni-margin-wrap {
		width: 100%;
		height: auto;
	}

	.swiper-item-img {
		width: 100%;
		border-radius: 10upx;
		display: block;
	}
</style>
